import { BellOutlined } from '@ant-design/icons';
import { ProList } from '@ant-design/pro-components';
import { Popover, Tabs } from 'antd';

const onChange = (key: string) => {
  console.log(key);
};
const dataSource = [
  {
    title: '语雀的天空',
  },
  {
    title: 'Ant Design',
  },
  {
    title: '蚂蚁金服体验科技',
  },
  {
    title: 'TechUI',
  },
];

const childrens = (
  <ProList<{ title: string }>
    style={{ width: '330px' }}
    metas={{
      title: {},
      description: {
        render: () => {
          return 'Ant Design, a design language for background applications, is refined by Ant UED Team';
        },
      },
    }}
    rowKey="title"
    dataSource={dataSource}
  />
);
const items = [
  {
    key: '1',
    label: '通知',
    children: childrens,
  },
  { key: '2', label: '提醒', children: childrens },
  { key: '3', label: '待办', children: childrens },
];

const content = (
  <Tabs
    tabBarGutter={80}
    size="large"
    centered={true}
    onChange={onChange}
    defaultActiveKey="1"
    items={items}
  />
);

export const NoticeDrop = () => {
  return (
    <Popover placement="bottomRight" content={content} trigger="hover" arrow={false}>
      <BellOutlined />
    </Popover>
  );
};
